<template>
  <div class="goods">
    <!-- 搜索区域 -->
    <div class="header-goods">
      <el-input @change="searchInt" v-model="input" placeholder="请输入内容" />
      <el-button type="primary">查询</el-button>
      <el-button type="primary">
        <router-link to="/add-goods" style="color: #fff">页面添加</router-link>
      </el-button>
    </div>
    <!-- 表格区域展示视图数据 -->
    <div class="wrapper wrapper-goods">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="商品ID" width="70" />
        <el-table-column prop="title" label="商品名称" width="100" />
        <el-table-column prop="price" label="商品价格" width="100" />
        <el-table-column prop="num" label="商品数量" width="100" />
        <el-table-column prop="category" label="商品类目" width="100" />
        <el-table-column prop="image" label="商品图片" />
        <el-table-column prop="sellPoint" label="商品卖点" />
        <el-table-column prop="decscs" label="商品描述" show-overflow-tooltip />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <MyPagination></MyPagination>
  </div>
</template>

<script>
import MyPagination from "../../components/MyPagination.vue";
export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      input: "",
      tableData: [
        {
          id: "1",
          title: "apple",
          price: "1亿",
          num: "1万",
          category: "水果",
          image: "无",
          sellPoint: "好吃",
          decscs: "特别好好好好好好吃",
        },
        
        {
          id: "1",
          title: "apple",
          price: "1亿",
          num: "1万",
          category: "水果",
          image: "无",
          sellPoint: "好吃",
          decscs: "特别好好好好好好吃",
        },
        
        {
          id: "1",
          title: "apple",
          price: "1亿",
          num: "1万",
          category: "水果",
          image: "无",
          sellPoint: "好吃",
          decscs: "特别好好好好好好吃",
        },
        {
          id: "1",
          title: "apple",
          price: "1亿",
          num: "1万",
          category: "水果",
          image: "无",
          sellPoint: "好吃",
          decscs: "特别好好好好好好吃",
        },
        {
          id: "1",
          title: "apple",
          price: "1亿",
          num: "1万",
          category: "水果",
          image: "无",
          sellPoint: "好吃",
          decscs: "特别好好好好好好吃",
        },
      ],
      
    };
  },
  methods: {
    // 添加弹框效果
    addGoods() {
      this.dialogVisible=true
    },
    handleEdit() {
      // 编辑操作
    },
    handleDelete() {
      // 删除操作
    },
    searchInt() {
      console.log(1);
    }
  },
  created() {
    // this.$api.getGoodsList()
    // .then(res=>{
    //   console.log(res.data);
    // })
  },
};
</script>

<style lang="less">
.goods {
  margin: 20px;
}
.header-goods {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper-goods {
  margin: 20px 0;
}
</style>